<template>
    <div>
        <!-- 页面：Setting -->
        <page-main>
            <el-tabs tab-position="left" style="height: 600px;">
                <el-tab-pane label="基本设置" class="basic">
                    <h2>基本设置 : <span style="font-size: 16px;">用于前端界面展示</span></h2>
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-form ref="form" :model="form" label-width="120px" label-suffix="：">
                                <el-form-item label="中 文 名 称">
                                    <el-input v-model="form.ChineseName" placeholder="请输入中文名称" />
                                </el-form-item>
                                <el-form-item label="英 文 名 称">
                                    <el-input v-model="form.EnglishName" placeholder="请输入英文名称" />
                                </el-form-item>
                                <el-form-item label="基 本 信 息">
                                    <el-input v-model="form.info" placeholder="请输入个人介绍基本信息" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">更新</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="8">
                            <el-upload
                                class="avatar-uploader"
                                :action="action"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon" />
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
import { action, baseURL, upLoadImg, updateUserInfo} from '@/api/myIndex'

export default {
    name: 'PersonalSetting',
    beforeRouteLeave(to, from, next) {
        console.log(to, 'tp')
        if (['personalEditPassword'].includes(to.name)) {
            this.$store.commit('keepAlive/add', 'PersonalSetting')
        }
        next()
    },
    props: {},
    data() {
        return {
            baseURL,
            action,
            form: {
                ChineseName: '',
                EnglishName: '',
                info: '',
                profile: ''
            },
            imageUrl: ''
        }
    },
    created() {},
    mounted() {},
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        // upload组件上传图片之前的回调，将图片保存到服务器并返回其路径
        async beforeAvatarUpload(file) {
            let fd = new FormData()
            fd.append('file', file)
            let result = await upLoadImg(fd)
            if (result.code === 200) {
                this.form.profile = result.data
                return true
            }
            this.$message.error(result.message)
            return false
        },
        editPassword() {
            this.$router.push({
                name: 'personalEditPassword'
            })
        },
        async onSubmit() {
            let id = 1
            let {ChineseName, EnglishName, info, profile} = this.form
            if (!ChineseName || !EnglishName || !info || !profile) {
                this.$message.error('输入框内容或图片不能为空')
                return
            }
            //
            let result = await updateUserInfo(id, ChineseName, EnglishName, info, profile)
            if (result.code === 200) {
                this.$message({
                    type: 'success',
                    message: '更新成功'
                })
                this.form = {
                    ChineseName: '',
                    EnglishName: '',
                    info: '',
                    profile: ''
                }
                this.imageUrl = ''
                return
            }
            this.$message.error(result.message)
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
    .el-tabs__header .el-tabs__nav {
        .el-tabs__active-bar {
            z-index: 0;
            width: 100%;
            background-color: #e1f0ff;
            border-right: 2px solid #409eff;
        }
        .el-tabs__item {
            text-align: left;
            padding-right: 100px;
        }
    }
    .el-tab-pane {
        padding: 0 20px 0 30px;
    }
}
h2 {
    margin: 0;
    margin-bottom: 30px;
    font-weight: normal;
}
.avatar-uploader {
    text-align: center;
    ::v-deep .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
